<template>
    <div>
        <div class="reviewers mtop-10">
            <!-- 这里是回复消息的详情界面 -->
            <details ref="details">
                <summary @click="changeOpen" class="pointerHover">查看{{ response.length }}条回复</summary>
                <ul>
                    <li v-for="item, index in response" :key="index"
                        :class="{ 'mtop-20': index == response.length - 1 && response.length != 1 }">
                        <div class="reviewer">
                            <img class="img-h circle pointer" @click="toUserDetail(item)" :src="item.picUrl" alt="评论者头像">
                            <span class="reviewer_name font-12 pointerHover" @click="toUserDetail(item)">{{ item.nickname
                            }}</span>
                            <span class="reviewer_time font-12">{{ item.time }}</span>
                        </div>
                        <div class="content mtop-10">
                            <p>{{ item.message }}
                            </p>
                            <div class="con_wrap">
                                <span class="dianzan pointerHover" @click="like(item)">
                                    <i v-if="!item.like" class="iconfont icon-dianzan"></i>
                                    <i v-else class="iconfont icon-dianzan3"></i>
                                    {{ item.support }}
                                </span>
                                <span class="mleft-20 pointerHover" @click="item.remarkStatus = !item.remarkStatus">{{
                                    item.remarkStatus ? '收起' : '回复' }}</span>
                                <span class="mleft-20 pointerHover" @click="deleteComment(item.id)"
                                    v-show="isSame(item.uuid)">删除</span><!-- 这个要判断是否是本人发的 -->
                                <span class="report mleft-20 pointerHover">举报</span>
                            </div>
                            <Remark v-show="item.remarkStatus" :id="item.id" v-if="item.remarkStatus"
                                @publish="handlerReplay"></Remark>
                            <!-- 这个下面可以再去嵌套一层用户，但是相对来说会简单很多！！！ -->
                            <!-- 姓名和评论，还有带有uuid -->
                            <div class="reply_wrap">
                    <li v-for="msg, index in item.response" :key="index"><span class="pointer" @click="toUserDetail(msg)">——
                            {{ msg.nickname }} ：</span>{{ msg.message }}</li>
        </div>
    </div>
    </li>
    </ul>
    </details>
    </div>
    <div class="main" v-show="isMainShow">
        <div class="main_inner">
            <p>
                <strong class="pointerHover">{{ response[0].nickname }}</strong>
                {{ response[0].message }}
            </p>
            <span @click="like(response[0])" class="main_dianzan pointerHover">
                <i v-if="!response[0].like" class="iconfont icon-dianzan"></i>
                <i v-else class="iconfont icon-dianzan3"></i>
                {{ response[0].support }}
            </span>
        </div>
    </div>
    </div>
</template>

<script>
import Remark from './Remark.vue';
import { addReply, delComment, support } from "@/api/api_playlist";
export default {
    props: ['response', "listId"],
    components: {
        Remark
    },
    methods: {
        changeOpen() {
            this.isMainShow = !this.isMainShow
        },
        isSame(originUid) {
            //本地的UUID
            let uuid = JSON.parse(localStorage.getItem("profile")).data.uuid;
            return uuid == originUid;
        },
        async deleteComment(id) {
            let res = await delComment(id);

            if (res.code == 200) {
                this.$message({
                    message: res.msg,
                    type: 'success'
                });
                this.$emit("reload")//再次获取！！！
            } else {
                this.$message.error(res.msg);
            }
        },
        toUserDetail(item) {
            let uuid = JSON.parse(localStorage.getItem("profile")).data.uuid;
            if (uuid == item.uuid) this.$router.push("/userdetail/")
            else {//跳转到其他用户的详细信息界面
                this.$router.push("/userdetail/" + String(item.uuid));
            }
        },
        async like(msg) {
            //本地的UUID
            let uuid = JSON.parse(localStorage.getItem("profile")).data.uuid;
            //调用方法
            let res = await support(msg.id, msg.like ? 0 : 1, uuid);
            this.$emit("reload")//再次获取！！！
        },
        async handlerReplay(message, lastId) {
            let uuid = JSON.parse(localStorage.getItem("profile")).data.uuid;
            let res = await addReply(message, uuid, this.listId, lastId);
            //后端交互，成功给出提示！
            if (res.code == 200) {
                this.$message({
                    message: res.msg,
                    type: 'success'
                });
                this.$emit("reload")//再次获取！！！
            } else {
                this.$message.error(res.msg);
            }
        },
    },
    data() {
        return {
            isMainShow: true,
        }
    },
}
</script>

<style lang="less" scoped>
.reviewers {
    padding-left: 50px;

    ul {
        border-radius: 20px;
        padding: 10px;
        padding-left: 30px;
        background-color: RGBA(238, 238, 238, 0.2);
    }
}

.main {
    padding-left: 50px;

    .main_inner {
        position: relative;
        border-radius: 10px;
        padding: 20px;
        padding-left: 30px;
        background-color: RGBA(238, 238, 238, 0.2);

        p {
            padding-right: 100px;
        }

        .main_dianzan {
            position: absolute;
            right: 40px;
            top: 10px;

            i {
                font-size: 30px;
                height: 16px;
                position: relative;
                top: 4px;
            }
        }
    }
}

.reviewer {
    height: 40px;
    position: relative;

    span {
        position: absolute;
        color: RGB(125, 125, 125);
    }

    .reviewer_name {
        top: 5px;
        left: 50px;

        .pointerHover:hover {
            cursor: pointer;
            color: RGB(35, 205, 150);
        }
    }

    .reviewer_time {
        bottom: 5px;
        left: 50px;
    }
}

.content {
    padding-left: 50px;

    .report {
        visibility: hidden;
    }

    &:hover .report {
        visibility: visible;
    }

    .con_wrap {

        .dianzan {
            i {
                font-size: 30px;
                height: 16px;
                position: relative;
                top: 4px;
            }
        }
    }

    .reply_wrap {
        margin-top: 10px;

        li {
            font-size: 16px;

            span {
                color: RGB(30, 204, 148);
            }
        }
    }

    p {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-weight: 600;
    }
}
</style>